<template>
  <div>
    <el-dialog v-model="isShow" :title="title" width="700">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100"
        status-icon
      >
        <el-col :span="22">
          <el-form-item label="编码" prop="code">
            <el-input v-model="ruleForm.code" />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="区域名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-form>
      <template #footer>
        <div class="flex_c">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  editId: {
    type: String,
  },
  title: {
    type: String,
  },
});
const isShow = defineModel("isShow");
interface RuleForm {
  name: string;
  code: string;
  remark: string;
}

const emit = defineEmits(["on-success"]);
const ruleFormRef = ref();

const ruleForm = reactive<RuleForm>({
  name: "",
  code: "",
  remark: "",
});
const rules = reactive({
  name: [
    { required: true, message: "品牌名称不能为空", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  code: [
    {
      required: true,
      message: "编码不能为空",
      trigger: "change",
    },
  ],
});
const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      resetForm(formEl)
      isShow.value = false
      emit("on-success");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
  isShow.value = false
};
</script>
